<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="column col q-pr-sm">
        <q-card flat>
          <SearchInput></SearchInput>
        </q-card>

        <q-card flat class="q-mt-sm">
          <q-tabs
            align="left"
            dense
            v-model="pageParam.order"
            @update:model-value="
              (val) => {
                pageParam.order = val;
                rows = [];
                f5();
              }
            "
            active-color="primary"
          >
            <q-tab name="read_num" label="最多阅读" />
            <q-tab name="edit_time" label="最近更新" />
          </q-tabs>
          <div class="absolute-right row items-center">
            <q-btn
              flat
              icon="refresh"
              @click="
                () => {
                  rows = [];
                  f5();
                }
              "
            >
              <q-tooltip> 刷新 </q-tooltip>
            </q-btn>
          </div>
        </q-card>
        <q-card
          v-for="item in rows"
          :key="item.id"
          title="查看博客"
          class="q-mt-sm"
          flat
        >
          <ItemArticle :item="item"></ItemArticle>
        </q-card>
        <div class="q-mt-sm" v-show="loading">
          <SkeletonArticle></SkeletonArticle>
        </div>

        <q-card
          v-if="loading == false && pageParam.recordCount == 0"
          flat
          class="q-mt-sm"
        >
          <q-card-section class="text-center dark:bg-neutral-700">
            <div
              class="h-xs w-full bg-contain bg-center bg-no-repeat"
              style="background-image: url('images/no-data.svg')"
            ></div>
            <div>
              <span class="text-primary">{{ text }}</span>
              无搜索结果~~
            </div>
          </q-card-section>
        </q-card>
        <div
          class="q-pt-sm full-width flex flex-center"
          v-if="pageParam.recordCount"
        >
          <div>共 {{ pageParam.recordCount }} 个结果</div>
          <q-pagination
            @update:model-value="
              (value) => {
                pageParam.pageNum = value;
                f5();
              }
            "
            v-model="pageParam.pageNum"
            :max="pageParam.totalPage"
            :max-pages="6"
            direction-links
          />
        </div>
      </div>
      <div class="col-3">
        <div class="sticky" :style="'top: ' + topVal">
          <div><HotTagCard></HotTagCard></div>
        </div>
      </div>
    </div>

    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import HotTagCard from 'src/components/HotTagCard.vue';
import SearchInput from './SearchInput.vue';
import SuspensionBtn from 'src/components/SuspensionBtn.vue';
import { onMounted } from 'vue';
import { useWebStore } from 'src/stores/webStore';
import ItemArticle from 'src/components/ItemArticle.vue';
import { watch } from 'vue';
import SkeletonArticle from 'src/components/SkeletonArticle.vue';
import { storeToRefs } from 'pinia';
import { f5, pageParam, loading, rows } from './shared';
const { topVal } = storeToRefs(useWebStore());

const props = withDefaults(
  defineProps<{
    text: string;
  }>(),
  {
    text: '',
  },
);

watch(
  () => props.text,
  (newVal) => {
    pageParam.value.text = newVal;
    f5();
  },
);

onMounted(() => {
  pageParam.value.text = props.text;
  f5();
});
</script>
<style lang="scss"></style>
